﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta charset="UTF-8">
	<title>登录页</title>
	<link href="css/style.css" rel="stylesheet">

</head>
<body>
	<div class="loginav">
		<div class="video"><video src="images/video.mp4" muted autoplay loop></video> </div>
		<div class=""></div>
		<div class="loginbox boxall">
			<div class="logo">
				<h1>学生信息统计系统</h1>
				<h2>Student information statistical system</h2>
				<!-- <img src="images/logo.png"> -->
			</div>
			<div class="logintit">用户登录</div>
			<ul class="logininput">
				<li>
					<i><img src="images/user.png"></i>
					<input class="forminput" id="usernameInput" value="" type="text" placeholder="用户名">
				</li>
				<li>
					<i><img src="images/password.png"></i>
					<input class="forminput" id="passwordInput" type="password" value="" placeholder="密码">
				</li>
				<div id="error-message" style="color: red; display: none;">用户名或密码错误，请重试。</div>

				<!-- <div class=" flex1" style="padding: 15px 0;">
					<label> <input type="checkbox" checked class="aui-checkbox">&nbsp;记住密码</label>
					<a href="#" class="text-primary"> 忘记密码？</a>
				</div> -->
				<li>
					<a href="#" id="loginBtn" class="btn btnblock btn-lg btn-block btn-primary">登录</a>
					
					<a href="./登入注册/login/login.html">
						<br>
<!--						<div class="reglogin">-->
						<!-- <button name="login">登入</button> -->
<!--						<button name="regist" >注册</button>-->
						<a href="./登入注册/login/login.html" id="name" class="btn btnblock btn-lg btn-block btn-primary">注册</a>
<!--					</div>-->
					</a>
					
				</li>
			</ul>
			<div class="boxfoot"></div>
		</div>
	</div>

	<canvas id='canvas'
		style="position:fixed; width:100%; height:100%; left: 0; top: 0; opacity: .3; pointer-events: none;"></canvas>
	<script src="./js/request.js"></script>
		<script>

			function displayErrorMessage() {
				document.getElementById('error-message').style.display = 'block';
			}

			// 在用户输入正确时隐藏错误消息
			function hideErrorMessage() {
				document.getElementById('error-message').style.display = 'none';
			}
			var loginBtn = document.getElementById("loginBtn");
			loginBtn.addEventListener("click", function(event) {
				event.preventDefault();
				
				var username = document.getElementById("usernameInput").value;
				var password = document.getElementById("passwordInput").value;

				setHostUrl("http://45.152.67.160:5109")
				Login(username,password,1).then(
					(data) => {
						// window.location.href = './上海/上海.html'
						window.location.href = './分析界面/index.html'
					}
            	).catch(
					(data) =>{
						displayErrorMessage()
					}
				);
				
				// if (username === "admin" && password ==="123456"){
				// 	hideErrorMessage()
				// 	window.location.href = './上海/上海.html'
				// }else{

				// 	displayErrorMessage()
				// }

			});

		var canvas = document.querySelector('canvas');
		var ctx = canvas.getContext('2d');
		var w = window.innerWidth;
		var h = window.innerHeight * 2 / 2;
		canvas.width = w;
		canvas.height = h;
		
		var dots = [];
		var minScale = 1;
		var maxScale = 3;
		var bei = 1;
		for (var i = 0; i < 300; i += 1) {
			dots.push(new Dot());
		}
		
		render = () => {
			ctx.clearRect(0, 0, w, h);
			ctx.fillStyle = 'rgba(26,94,199,.6)';
			ctx.fillRect(0, 0, w, h);
			for (var i = 0; i < dots.length; i += 1) {
				var dot = dots[i];
				dot.update();
				dot.paint();
			}
			requestAnimationFrame(render);
		};
		render();
		
		function Dot() {
			this.radius = Math.floor(Math.random() * 3 + 2);
			this.d = Math.random() * 2 * Math.PI;
			this.rx = Math.random() * w * (Math.random() > 0.6 ? 2 / 3 : 1 / 4);
			this.ry = Math.random() * h - h / 2;
			this.x = Math.cos(this.d) * this.rx + w / 2;
			this.y = Math.sin(this.d) * this.ry + h / 2;
			this.z = (Math.pow(Math.pow(this.rx, 2) + Math.pow(this.ry, 2), 0.5) / Math.pow(Math.pow(w / 2, 2) + Math.pow(h / 2, 2), 0.5))
			this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;
			this.speed = Math.random() * 0.0004 + 0.0004;
			this.alpha = this.scale / maxScale * 0.3 + 0.1;
			this.count = 0;
			this.paint = () => {
				ctx.fillStyle = 'rgba(0,130,255,' + this.alpha + ')';
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius * this.scale * this.z, 0, Math.PI * 2);
				ctx.fill();
			};
			this.update = () => {
				this.count += 0.01;
				if (Math.floor(this.count) % 12 === 0 && Math.floor(this.count) != 0) {
					this.d += 0.008;
					if (this.count > Math.floor(this.count) + 0.5) {
						this.d -= 0.008;
					}
				}
		
				this.x = Math.sin(this.d) * this.rx + w / 2;
				this.y = Math.cos(this.d) * this.ry + h / 2;
				this.d -= this.speed;
				this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;
				this.alpha = this.scale / maxScale * 0.3 + 0.1;
			};
		}
		</script>
</body>

</html>
